<template>
    <div class="order-management">
        <!-- <h2>订单管理界面</h2> -->
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>订单管理界面</span>
                <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <!-- 搜索区域 -->
            <div class="search-area">
                <div id="searchInput">
                    <span>名称:</span><el-input v-model="searchName" placeholder="请输入订单名称" size="small" style="width: 200px;"></el-input>
                    <span>类别:</span><el-input v-model="searchCategory" placeholder="请输入订单类别" size="small" style="width: 200px;"></el-input>
                </div>
                <div id="searchBtn">
                    <!-- <button @click="searchOrders">查询订单</button> -->
                    <el-button type="primary" icon="el-icon-search" @click="searchOrders" size="small">查询订单</el-button>
                    <button @click="resetSearch"><i class="el-icon-refresh"></i></button>
                </div>
            </div>
        </el-card>
        <el-card class="box-card">
            <div>
                <!-- 导航栏 -->
                <div class="navigation-bar">
                    <div id="order_nav">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="全部订单" name="first"></el-tab-pane>
                            <el-tab-pane label="服饰类订单" name="second"></el-tab-pane>
                            <el-tab-pane label="器械类订单" name="third"></el-tab-pane>
                            <el-tab-pane label="医疗保障类订单" name="fourth"></el-tab-pane>
                        </el-tabs>
                    </div>

                    <div id="order_btn">
                        <button @click="addOrderDialogVisible = true"><i class="el-icon-plus"></i></button>
                        <button><i class="el-icon-download"></i></button>
                    </div>
                </div>
                <!-- 订单列表 -->
                <div class="order-form">
                    <el-table :data="filteredTableData" style="width: 100%" height="250">
                        <el-table-column fixed prop="name" label="订单名称" width="200">
                        </el-table-column>
                        <el-table-column prop="pic" label="图片" width="120">
                        </el-table-column>
                        <el-table-column prop="cost" label="单价" width="100">
                        </el-table-column>
                        <el-table-column prop="quantity" label="数量" width="100">
                        </el-table-column>
                        <el-table-column prop="classification" label="类别" width="120">
                        </el-table-column>
                        <el-table-column prop="date" label="购买日期" width="150">
                        </el-table-column>
                        <el-table-column prop="bz" label="备注" width="300">
                        </el-table-column>
                    </el-table>
                </div>
                <div>
                    <el-dialog title="添加订单" :visible.sync="addOrderDialogVisible" width="30%"
                        :before-close="handleClose">
                        <el-form :model="newOrder">
                            <el-form-item label="订单名称">
                                <el-input v-model="newOrder.name"></el-input>
                            </el-form-item>
                            <el-form-item label="购买时间">
                                <el-input v-model="newOrder.date"></el-input>
                            </el-form-item>
                            <el-form-item label="图片">
                                <el-input v-model="newOrder.pic"></el-input>
                            </el-form-item>
                            <el-form-item label="单价">
                                <el-input v-model="newOrder.cost"></el-input>
                            </el-form-item>
                            <el-form-item label="数量">
                                <el-input v-model="newOrder.quantity"></el-input>
                            </el-form-item>
                            <el-form-item label="类别">
                                <el-input v-model="newOrder.classification"></el-input>
                            </el-form-item>
                            <el-form-item label="备注">
                                <el-input type="textarea" v-model="newOrder.bz">
                                </el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="addOrderDialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="addNewOrder">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </div>
        </el-card>

    </div>
</template>

<script>
export default {
    name: 'OrderManagement',
    data() {
        return {
            tableData:require("@/assets/jsonData/data.json"),
            orders: [], // 假设这是从后端获取的订单数据
            searchName: '',
            searchCategory: '',
            categories: [
                { label: '全部订单', value: 'all' },
                { label: '服饰类订单', value: 'clothing' },
                { label: '器械类订单', value: 'equipment' },
                { label: '医疗保障类订单', value: 'medical' }
            ],
            activeName: 'first', // 默认选中全部订单
            filteredTableData: [],
            //添加订单
            addOrderDialogVisible: false, // 控制添加订单对话框的显示
            newOrder: {
                name: '',
                pic: '',
                cost: '',
                quantity: '',
                classification: '',
                bz: '',
            },
        };
    },
    created() {
        this.filteredTableData = this.tableData; // 初始化时显示所有订单
        // console.log(this.tableData)
    },
    methods: {
        searchOrders() {
            // 根据搜索框中的输入过滤订单
            // this.filteredTableData = this.tableData.filter(order =>
            //     (order.name.includes(this.searchName) || this.searchName === '') &&
            //     (order.classification.includes(this.searchCategory) || this.searchCategory === '')
            // );
            // 执行模糊查询
            this.filterByCategory('');
        },
        // 重置搜索条件
        resetSearch() {
            this.searchName = '';
            this.searchCategory = '';
            this.activeName = 'first';
            this.filteredTableData = [...this.tableData]; // 重置为原始数据
        },
        // 根据类别筛选订单
        // filterByCategory(category) {
        //     this.filteredTableData = this.tableData.filter(order => order.classification === category);
        // },
        filterByCategory(category) {
            // 确保搜索框中的值用于过滤
            const searchName = this.searchName.trim(); // 获取订单名称搜索条件
            const searchCategory = this.searchCategory.trim(); // 获取订单类别搜索条件

            // 使用模糊查询过滤订单
            this.filteredTableData = this.tableData.filter(order =>
                (!searchName || order.name.toLowerCase().includes(searchName.toLowerCase())) &&
                (!searchCategory || order.classification.toLowerCase().includes(searchCategory.toLowerCase()))
            );
        },
        // 处理标签页点击事件
        handleClick(tab) {
            // 根据标签页的类别和搜索框中的输入过滤订单
            if (tab.name === 'first') {
                // 如果选中全部订单，则显示所有订单
                this.filteredTableData = this.tableData;
            } else {
                // 否则，根据当前搜索条件和标签页的类别过滤订单
                this.filteredTableData = this.tableData.filter(order =>
                    (order.name.includes(this.searchName) || this.searchName === '') &&
                    (order.classification === tab.label)
                );
            }
        },
        // 添加订单
        addOrders() {
            // 创建一个新的订单对象，这里仅作为示例，实际应包含完整的订单信息
            const newOrder = {
                date: '2024-06-01', // 示例日期
                name: '新订单名称', // 示例名称
                pic: '图片链接', // 示例图片链接
                cost: '100', // 示例单价
                quantity: '10', // 示例数量
                classification: '新订单类别', // 示例分类
                bz: '', // 初始备注为空
            };

            // 将新订单添加到 tableData 数组
            this.tableData.push(newOrder);

            // 清空搜索条件，确保新订单能够显示
            this.searchName = '';
            this.searchCategory = '';
            this.filteredTableData = this.tableData;
        },
        addNewOrder() {
            if (!this.validateOrder(this.newOrder)) {
                return;
            }
            // 添加新订单到 tableData
            this.tableData.push(this.newOrder);
            // 关闭对话框
            this.addOrderDialogVisible = false;
            // 清空新订单表单
            this.newOrder = {
                name: '',
                pic: '',
                cost: '',
                quantity: '',
                classification: '',
                bz: '',
            };
        },
        validateOrder(order) {
            // 验证订单信息是否完整
            return order.name && order.date && order.cost && order.quantity && order.classification;
        },
        handleClose() {
            this.addOrderDialogVisible = false;
        },
        // deleteOrder(orderId) {
        //     // 删除订单的逻辑
        // },
        // editOrder(order) {
        //     // 编辑订单的逻辑
        // },
        // addNote(order) {
        //     // 添加备注的逻辑
        // }
    }
};
</script>

<style scoped>
/* 在这里添加CSS样式 */
.search-area {
    min-width: 600px;
    width: 100%;
    height: 75px;
    display: flex;
    justify-content: space-between;
}

#searchInput,
#searchBtn {
    margin: auto 0;
}

#searchInput span {
    margin: 0 10px 0 5px;
    color:#303133;

}

#searchBtn button {
    margin-right: 10px;
    
}

.navigation-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

#order_btn button {
    margin: 10px 10px 0 0;
}
</style>